<template>
  <uni-data-picker
			v-if="localdata.length > 0"
      :localdata="localdata"
      :popup-title="popupTitle"
      :placeholder="placeholder"
      :map="{ text: 'ext_name', value: 'id' }"
      v-model="selectedValue"
      @change="onChange"
      @nodeclick="onNodeClick"
      v-slot:default="{ data, error, options }"
      :clear-icon="false"
  >
    <view v-if="error" class="error">
      <text>{{ error }}</text>
    </view>
    <view class="selected" v-else-if="selectedAddress.length">
      <text v-for="(item, index) in selectedAddress" :key="index">{{ item.text }}</text>
    </view>
    <view class="placeholder-text text-right" v-else>
      <text>{{ placeholder }}=={{selectedAddress}}</text>
    </view>
  </uni-data-picker>
</template>
<script>
// import localdata from '@/common/area_format_user.json'
export default {
  name: "e-data-picker",
  props: {
    // localdata: Array,
    popupTitle: String,
    placeholder: String,
    value: [String, Number, Array]
  },
  data() {
    return {
      localdata: [],
      selectedValue: this.value,
      selectedAddress: Array.isArray(this.value) ? this.value : []
    };
  },
  methods: {
    onChange(event) {
      this.selectedAddress = event.detail.value;
      console.log('ffffff',this.selectedAddress);
      this.$emit('change', event);
    },
    onNodeClick(event) {
      this.$emit('nodeclick', event);
    },
		getLocaldata() {
		  return new Promise((resolve, reject) => {
		    uni.request({
		      url: 'https://baojia.nacida.love/uploads/area_format_user.json',
		      success: (res) => {
		        resolve(res.data);
		      },
		      fail: (err) => {
		        reject(err);
		      }
		    });
		  });
		}
  },
  watch: {
    value(newValue) {
			console.log('xxxxxx22',newValue)
      this.selectedValue = newValue;
      this.selectedAddress = Array.isArray(newValue) ? newValue : [];
    }
  },
	mounted() {
	  this.getLocaldata().then(res => {
	    console.log("组件加载完执行",res);
	    this.localdata = res;
	  });
	},
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style scoped lang="scss">
.placeholder-text,.selected{
  color: #999999;
  font-size: 26rpx;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 30rpx;
}
</style>